<template>
  <div class="section-grid">
     <div class="grid-item" :class="mode + '--item'" v-for="(item, i) in datas" :key="i" 
        @click="handlerDetail(item)"
     >
         <span class="icon-check" title="勾选"  :class="isChecked(item) > -1 && 'checked'" @click.stop="toggleCheck(item)"></span>
         <span class="icon-del"  title="删除" @click.stop="delThis(item)"></span>
         <span class="icon-edit" title="编辑" @click.stop="editThis(item)"></span>
         <span class="icon-able" 
                v-if="mode == 'grid'"
                :class="item.enable ? 'enable' : 'disable'"
                :title="item.enable ? '启用中' : '已禁用'"
        ></span>
        
         <img class="grid-cover" :src="item.img || '/com.leadal.saloon.console/theme/images/portlet.png'" alt="" v-if="mode == 'grid'">
         <img class="grid-cover" :src="item.img || '/com.leadal.saloon.vuelayout/image/layout.png'" alt="" v-if="mode == 'layout'">    
         <p class="grid-text" :title="item.name" v-if="mode == 'grid'">{{item.name}}</p>
         <p class="grid-text" :title="item.layoutName" v-if="mode == 'layout'">{{item.layoutName}}</p>

     </div>
  </div>
</template>

<script>
export default {
    name: 'section-grid',
    props: {
        value: {
            type: Array
        },
        mode: {
            type: String,
            default: 'grid' // layout
        }
    },
    computed: {
        datas: {
            get(){
                
                return this.value;
            },
            set(n){
                this.$emit('input', n)
            }
        }
    },

    data(){
        return {
            checkArr: []
        }
    },

    watch: {
        checkArr(n){
            this.$emit('upload-check', n);
        }
    },

    methods: {

        handlerDetail(data){
            this.$emit('detail-click', data);
        },

        toggleCheck(data){
            
            let index = this.isChecked(data);
            console.log(index);
            if(index > -1){
                this.checkArr.splice(index, 1);
            }else{
                this.checkArr.push(data.id);
            }
            console.log(this.checkArr)
        },

        delThis(data){
            this.$emit('del-click', data);
        },

        editThis(data){
            this.$emit('edit-click', data); 
        },

        isChecked(data){
            return this.checkArr.findIndex(item => item == data.id);
        }
    }
}
</script>

<style>
    .section-grid {
        height: 100%;
        width: 100%;
    }

    .section-grid .grid-item {
        display: inline-block;
        margin: 20px 30px;
        width: 100px;
        height: 110px;
        position: relative;
        vertical-align: top;
    }

    .grid-item .grid-cover {
        width: 80px;
        height: 80px;
        display: block;
        margin: 0 auto 8px;
    }

    .grid-item .grid-text {
        text-align: center;
        line-height: 24px;
        padding: 2px 4px;
        border-radius: 20px;
        background-color:  #787878;
        color: #fff;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
        max-width: 120px;
        margin: 0 auto;
    } 

    .section-grid .layout--item {
        width: 236px;
        height: 160px;
        margin: 20px 70px;
    }

    .layout--item .grid-cover {
        width: 220px;
        height: 120px;
        cursor: pointer;
    }

    .icon-check {
        position: absolute;
        z-index:1;
        top: -10px;
        left: -5p;
        width: 20px;
        height: 20px;
        border: 2px solid steelblue;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
    }

    .icon-check.checked {
        background-color: rgb(201, 43, 43);
    }

    

    .icon-del,
    .icon-edit,
    .icon-able  {
        position: absolute;
        z-index:1;
        top: -10px;
        right: 0px;
        width: 20px;
        height: 20px;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: #329ed6;
        cursor: pointer;
    }

    .icon-del {
        background-color: #ee2829;
        width: 22px;
        height: 22px;
    }

    .icon-del::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) rotate(135deg);
        width: 16px;
        height: 3px;
        background-color: #fff;
        content: '';
    }

    .icon-del::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        width: 16px;
        height: 3px;
        background-color: #fff;
    }

    .icon-edit {
        top: 20px;
        color: #fff;
        text-align: center;
        line-height: 14px;
        background: url('/com.leadal.saloon.vuelayout/image/edit.png');
        background-size: 90% 90%;
        background-position: center;
    }

    .icon-able {
        top: 50px;
        color: #fff;
        text-align: center;
    }

    .icon-able.disable {
        background-color: rgb(201, 43, 43);
    }

</style>